<template>
  <div class="default_pwd_container">
    <el-input
      v-model="innerval"
      @input="handleInput"
      type="password"
      show-password
      autoComplete="new-password"
      v-bind="$attrs"
    />
    <el-button
      @click="handleDefaultPassword"
      class="table-button-blue default-pwd-button"
      size="small"
    >
      使用默认密码
    </el-button>
  </div>
</template>
<script>
export default {
  name: 'DefaultPwd',
  inheritAttrs: false,
  props: {
    defaultPwd: {
      required: true,
      type: String,
    },
    value: [String, Number],
  },
  watch: {
    value(val) {
      this.innerval = val
    },
  },
  data() {
    return {
      innerval: '',
    }
  },
  methods: {
    handleDefaultPassword() {
      this.innerval = this.defaultPwd
      this.$emit('input', this.innerval)
      this.$emit('changeDefaultPwd', this.innerval)
    },
    handleInput(val) {
      this.$emit('input', val)
    },
  },
}
</script>
<style lang="scss" scoped>
.default_pwd_container {
  width: 100%;
  display: flex;

  .default-pwd-button {
    height: 40px;
    margin-left: 20px;
  }
}
</style>
